<template>
  <div class="fileList" @contextmenu="fileListRightClick">
    <FileIcon
      v-for="f in fileList"
      :file="f"
      :key="f.id"
      :click-func="openFileFn"
      :right-click="rightClick"
    />
  </div>
</template>
<script>
import FileIcon from "@/components/GridFileIcon/FileIcon";
import { mapGetters } from "vuex";

export default {
  name: "GridFileIcon",
  components: { FileIcon },
  computed: { ...mapGetters(["fileType"]) },
  props: {
    fileList: { type: Array },
    currentDirId: { type: Number, default: null },
    openFileFn: { type: Function },
    createDirFn: { type: Function },
    refreshFn: { type: Function },
    deleteFileFn: { type: Function },
    renameFileFn: { type: Function },
    moveFileFn: { type: Function },
    downloadFn: { type: Function },
    shareFn: { type: Function }
  },
  methods: {
    rightClick(event, file) {
      const p = this;
      this.$contextmenu({
        items: [
          this.fileType[file.typeId].typeSuffix !== "misc"
            ? {
                label: "打开",
                onClick: () => p.openFileFn(file)
              }
            : {},
          {
            label: "下载",
            divided: true,
            onClick: () => p.downloadFn(file.id, file.name)
          },
          this.fileType[file.typeId].typeSuffix !== "dir"
            ? {
                label: "分享",
                onClick: () => p.shareFn(file.id)
              }
            : {},
          {
            label: "移动到",
            onClick: () => p.moveFileFn(file.id)
          },
          {
            label: "复制到",
            onClick: () => p.$bus.$emit("copyFile", file.id)
          },
          {
            label: "重命名",
            divided: true,
            onClick: () => p.renameFileFn(file.id, file.name)
          },
          {
            label: "删除",
            onClick: () => p.deleteFileFn(file.id)
          }
        ],
        event,
        zIndex: 3,
        minWidth: 140
      });
      event.preventDefault();
    },
    fileListRightClick(event) {
      const p = this;
      this.$contextmenu({
        items: [
          {
            label: "上传",
            onClick: () => p.$bus.$emit("upload")
          },
          {
            label: "新建文件夹",
            onClick: () => p.createDirFn(),
            divided: true
          },
          {
            label: "刷新",
            onClick: () => p.refreshFn()
          }
        ],
        event,
        zIndex: 3,
        minWidth: 140
      });
      event.preventDefault();
    }
  }
};
</script>
<style lang="less" scoped>
.fileList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: baseline;
  height: 100%;
  overflow: auto;
}
</style>
